import React, { Component } from 'react'

export default class App extends Component {

  state = {
    flag: false
  }

  render() {

    // 我们可以使用 if else 实现整套模板的显示隐藏
    // if(this.state.flag){
    //   return (
    //     <div>App 真</div>
    //   )
    // }else {
    //   return (
    //     <div>App 假</div>
    //   )
    // }
    // 不要在  jsx 代码使用 if else 语句
    return (
      <>
        <div>App</div>

        {/* 当为真的时候就显示后面的内容 */}
        {this.state.flag && <h1>真：你笑起来真好看</h1>}

        {/* 当为假的时候显示后面的内容 */}
        {this.state.flag || <h1>假：像春天的花一样</h1>}

        {/* 通过三元运算 */}
        {this.state.flag ? (<div><h1>为真</h1><h2>123456</h2></div>) : (<h1>为假</h1>)}

        <button onClick={()=>{
          this.setState({
            flag: !this.state.flag
          })
        }}>切换</button>

      </>
    )

  }
}
